<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap flex弹性布局(下)</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    main{
        margin: 20px;
    }
</style>
<body>
    

    <main>

        <div class="d-flex bg-secondary p-2 m-2 text-light">
            <div class="m-1 p-1 border border-info flex-grow-1">元素1</div>
            <div class="m-1 p-1 border border-info">元素2</div>
            <div class="m-1 p-1 border border-info flex-grow-1">元素3</div>
            <div class="m-1 p-1 border border-info">元素4</div>
            <div class="m-1 p-1 border border-info">元素5</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-light">
            <div class="m-1 p-1 w-50 border border-info flex-grow-1">元素1</div>
            <div class="m-1 p-1 border border-info flex-shrink-1">元素2</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-light">
            <div class="m-1 p-1 border border-info">元素1</div>
            <div class="m-1 p-1 border border-info">元素2</div>
            <div class="m-1 p-1 border border-info">元素3</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-light">
            <div class="m-1 p-1 mr-auto border border-info">元素1</div>
            <div class="m-1 p-1 border border-info">元素2</div>
            <div class="m-1 p-1 border border-info">元素3</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-light">
            <div class="m-1 p-1 border border-info">元素1</div>
            <div class="m-1 p-1 border border-info">元素2</div>
            <div class="m-1 p-1 ml-auto border border-info">元素3</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-light flex-column align-items-start" style="height:200px;">
            <div class="m-1 p-1 mb-auto border border-info">元素1</div>
            <div class="m-1 p-1 border border-info">元素2</div>
            <div class="m-1 p-1 border border-info">元素3</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-light flex-column align-items-end" style="height:200px;">
            <div class="m-1 p-1 border border-info">元素1</div>
            <div class="m-1 p-1 border border-info">元素2</div>
            <div class="m-1 p-1 mt-auto border border-info">元素3</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-light w-50 flex-nowrap">
            <div class="m-1 p-1 border border-info">元素1......</div>
            <div class="m-1 p-1 border border-info">元素2......</div>
            <div class="m-1 p-1 border border-info">元素3......</div>
            <div class="m-1 p-1 border border-info">元素4......</div>
            <div class="m-1 p-1 border border-info">元素5......</div>
            <div class="m-1 p-1 border border-info">元素6......</div>
            <div class="m-1 p-1 border border-info">元素7......</div>
            <div class="m-1 p-1 border border-info">元素8......</div>
            <div class="m-1 p-1 border border-info">元素9......</div>
            <div class="m-1 p-1 border border-info">元素10......</div>
            <div class="m-1 p-1 border border-info">元素11......</div>
            <div class="m-1 p-1 border border-info">元素12......</div>
            <div class="m-1 p-1 border border-info">元素13......</div>
            <div class="m-1 p-1 border border-info">元素14......</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-light w-50 flex-wrap">
            <div class="m-1 p-1 border border-info">元素1......</div>
            <div class="m-1 p-1 border border-info">元素2......</div>
            <div class="m-1 p-1 border border-info">元素3......</div>
            <div class="m-1 p-1 border border-info">元素4......</div>
            <div class="m-1 p-1 border border-info">元素5......</div>
            <div class="m-1 p-1 border border-info">元素6......</div>
            <div class="m-1 p-1 border border-info">元素7......</div>
            <div class="m-1 p-1 border border-info">元素8......</div>
            <div class="m-1 p-1 border border-info">元素9......</div>
            <div class="m-1 p-1 border border-info">元素10......</div>
            <div class="m-1 p-1 border border-info">元素11......</div>
            <div class="m-1 p-1 border border-info">元素12......</div>
            <div class="m-1 p-1 border border-info">元素13......</div>
            <div class="m-1 p-1 border border-info">元素14......</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-dark w-50 flex-wrap-reverse">
            <div class="m-1 p-1 border border-info">元素1......</div>
            <div class="m-1 p-1 border border-info">元素2......</div>
            <div class="m-1 p-1 border border-info">元素3......</div>
            <div class="m-1 p-1 border border-info">元素4......</div>
            <div class="m-1 p-1 border border-info">元素5......</div>
            <div class="m-1 p-1 border border-info">元素6......</div>
            <div class="m-1 p-1 border border-info">元素7......</div>
            <div class="m-1 p-1 border border-info">元素8......</div>
            <div class="m-1 p-1 border border-info">元素9......</div>
            <div class="m-1 p-1 border border-info">元素10......</div>
            <div class="m-1 p-1 border border-info">元素11......</div>
            <div class="m-1 p-1 border border-info">元素12......</div>
            <div class="m-1 p-1 border border-info">元素13......</div>
            <div class="m-1 p-1 border border-info">元素14......</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-dark w-70 flex-wrap align-content-start" style="height:200px;">
            <div class="m-1 p-1 border border-info">元素1......</div>
            <div class="m-1 p-1 border border-info">元素2......</div>
            <div class="m-1 p-1 border border-info">元素3......</div>
            <div class="m-1 p-1 border border-info">元素4......</div>
            <div class="m-1 p-1 border border-info">元素5......</div>
            <div class="m-1 p-1 border border-info">元素6......</div>
            <div class="m-1 p-1 border border-info">元素7......</div>
            <div class="m-1 p-1 border border-info">元素8......</div>
            <div class="m-1 p-1 border border-info">元素9......</div>
            <div class="m-1 p-1 border border-info">元素10......</div>
            <div class="m-1 p-1 border border-info">元素11......</div>
            <div class="m-1 p-1 border border-info">元素12......</div>
            <div class="m-1 p-1 border border-info">元素13......</div>
            <div class="m-1 p-1 border border-info">元素14......</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-dark w-70 flex-wrap align-content-center" style="height:200px;">
            <div class="m-1 p-1 border border-info">元素1......</div>
            <div class="m-1 p-1 border border-info">元素2......</div>
            <div class="m-1 p-1 border border-info">元素3......</div>
            <div class="m-1 p-1 border border-info">元素4......</div>
            <div class="m-1 p-1 border border-info">元素5......</div>
            <div class="m-1 p-1 border border-info">元素6......</div>
            <div class="m-1 p-1 border border-info">元素7......</div>
            <div class="m-1 p-1 border border-info">元素8......</div>
            <div class="m-1 p-1 border border-info">元素9......</div>
            <div class="m-1 p-1 border border-info">元素10......</div>
            <div class="m-1 p-1 border border-info">元素11......</div>
            <div class="m-1 p-1 border border-info">元素12......</div>
            <div class="m-1 p-1 border border-info">元素13......</div>
            <div class="m-1 p-1 border border-info">元素14......</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-dark w-70 flex-wrap align-content-end" style="height:200px;">
            <div class="m-1 p-1 border border-info">元素1......</div>
            <div class="m-1 p-1 border border-info">元素2......</div>
            <div class="m-1 p-1 border border-info">元素3......</div>
            <div class="m-1 p-1 border border-info">元素4......</div>
            <div class="m-1 p-1 border border-info">元素5......</div>
            <div class="m-1 p-1 border border-info">元素6......</div>
            <div class="m-1 p-1 border border-info">元素7......</div>
            <div class="m-1 p-1 border border-info">元素8......</div>
            <div class="m-1 p-1 border border-info">元素9......</div>
            <div class="m-1 p-1 border border-info">元素10......</div>
            <div class="m-1 p-1 border border-info">元素11......</div>
            <div class="m-1 p-1 border border-info">元素12......</div>
            <div class="m-1 p-1 border border-info">元素13......</div>
            <div class="m-1 p-1 border border-info">元素14......</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-dark w-70 flex-wrap align-content-between" style="height:200px;">
            <div class="m-1 p-1 border border-info">元素1......</div>
            <div class="m-1 p-1 border border-info">元素2......</div>
            <div class="m-1 p-1 border border-info">元素3......</div>
            <div class="m-1 p-1 border border-info">元素4......</div>
            <div class="m-1 p-1 border border-info">元素5......</div>
            <div class="m-1 p-1 border border-info">元素6......</div>
            <div class="m-1 p-1 border border-info">元素7......</div>
            <div class="m-1 p-1 border border-info">元素8......</div>
            <div class="m-1 p-1 border border-info">元素9......</div>
            <div class="m-1 p-1 border border-info">元素10......</div>
            <div class="m-1 p-1 border border-info">元素11......</div>
            <div class="m-1 p-1 border border-info">元素12......</div>
            <div class="m-1 p-1 border border-info">元素13......</div>
            <div class="m-1 p-1 border border-info">元素14......</div>
        </div>
       
        <br>

        <div class="d-flex bg-secondary p-2 m-2 text-dark w-70 flex-wrap align-content-around" style="height:200px;">
            <div class="m-1 p-1 border border-info">元素1......</div>
            <div class="m-1 p-1 border border-info">元素2......</div>
            <div class="m-1 p-1 border border-info">元素3......</div>
            <div class="m-1 p-1 border border-info">元素4......</div>
            <div class="m-1 p-1 border border-info">元素5......</div>
            <div class="m-1 p-1 border border-info">元素6......</div>
            <div class="m-1 p-1 border border-info">元素7......</div>
            <div class="m-1 p-1 border border-info">元素8......</div>
            <div class="m-1 p-1 border border-info">元素9......</div>
            <div class="m-1 p-1 border border-info">元素10......</div>
            <div class="m-1 p-1 border border-info">元素11......</div>
            <div class="m-1 p-1 border border-info">元素12......</div>
            <div class="m-1 p-1 border border-info">元素13......</div>
            <div class="m-1 p-1 border border-info">元素14......</div>
        </div>

         
    </main>

    <script src="../js/bootstrap.js"></script>
</body>
</html>